<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
		<style>
			img{
				width: 150px;
				height: 150px;
			}
			tr{
				width: 85%;
				text-align: center;
			}
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" id="search-txt">
			<input type="button" value="搜索" id="search-btn">
			<input type="button" value="新增" id="new">
		</div>
		<form>
			<table id="tbl">
				<tr>
					<td>图片</td>
					<td>学号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>班级</td>
					<td>院系</td>
					<td>宿舍</td>
					<td>电话</td>
					<td>操作</td>
				</tr>
			</table>
		</form>
		<div id="page">

		</div>
		<script>
			var objs;
			var totalrecords;//总记录数
			var pageSize=5;//初始页面大小显示五条数据
			var currentPage;//当前界面初始为1
			var maxPage;//尾页
			function pageInit(){
				totalrecords=objs.length;
				maxPage=totalrecords%pageSize==0?totalrecords/pageSize:totalrecords/pageSize+1;
				currentPage=1;
			}
			function showRecords(){
				$(".add").remove();//先移除
				for(index=pageSize*(currentPage-1);index<pageSize*currentPage;index++){
					var tr=$("<tr class='add'></tr>");
					if(objs[index].gender=="女"){
						tr.append("<img src='img/girl.jpeg'>");
					}else{
						tr.append("<img src='img/boy.jpg'>");
					}
					tr.append("<td>"+objs[index].stuNo+"</td>");
					tr.append("<td>"+objs[index].stuName+"</td>");
					tr.append("<td>"+objs[index].gender+"</td>");
					tr.append("<td>"+objs[index].classes+"</td>");
					tr.append("<td>"+objs[index].department+"</td>");
					tr.append("<td>"+objs[index].dormNo+"</td>");
					tr.append("<td>"+objs[index].tel+"</td>");
					var bt_delete=$("<input type='button' name='delete' value='删除'>");
					bt_delete.on("click",function () {
						$.ajax({
							type: "get",
							url: "http://localhost:8080/studentDemo/DeleteStudentByNoServlet",
							data: {"stuNo": objs[index].stuNo},
							async: false,
							success:function (response) {
								var data=JSON.parse(response);
								switch (data.result) {
									case "ok":
										alert(data.msg);
										window.location.href="listStudents.html";
										break;
									case "error":
										alert(data.msg);
										break;
									default:
										alert("出错啦!");
										break;
								}
							}
						});
					});
					var bt_update=$("<input type='button' name='update' value='修改'>");
					bt_update.on("click",function () {
						window.location.href="updateStudent.html?stuNo="+objs[index].stuNo;
					});
					var td=$("<td></td>");
					td.append(bt_delete);
					td.append(bt_update);
					tr.append(td);
					$("#tbl").append(tr);

				}
			}
			$("#new").click(function () {
				window.location.href="newStudent.html";
			})
			$("#search-btn").click(function () {
				var searchTxt=$("#search-txt").val();
				$(".add").remove();
				if(searchTxt==""){
					$.ajax({
						type:"get",
						url:"http://localhost:8080/studentDemo/ListStudentsServlet",
						async:false,
						success:function (response) {
							objs=JSON.parse(response);
							$.each(objs,function (index) {
								var tr=$("<tr class='add'></tr>");
								if(objs[index].gender=="女"){
									tr.append("<img src='img/girl.jpeg'>");
								}else{
									tr.append("<img src='img/boy.jpg'>");
								}
								tr.append("<td>"+objs[index].stuNo+"</td>");
								tr.append("<td>"+objs[index].stuName+"</td>");
								tr.append("<td>"+objs[index].gender+"</td>");
								tr.append("<td>"+objs[index].classes+"</td>");
								tr.append("<td>"+objs[index].department+"</td>");
								tr.append("<td>"+objs[index].dormNo+"</td>");
								tr.append("<td>"+objs[index].tel+"</td>");
								var bt_delete=$("<input type='button' name='delete' value='删除'>");
								bt_delete.on("click",function () {
									$.ajax({
										type: "get",
										url: "http://localhost:8080/studentDemo/DeleteStudentByNoServlet",
										data: {"stuNo": objs[index].stuNo},
										async: false,
										success:function (response) {
											var data=JSON.parse(response);
											switch (data.result) {
												case "ok":
													alert(data.msg);
													window.location.href="listStudents.html";
													break;
												case "error":
													alert(data.msg);
													break;
												default:
													alert("出错啦!");
													break;
											}
										}
									});
								});
								var bt_update=$("<input type='button' name='update' value='修改'>");
								bt_update.on("click",function () {
									window.location.href="updateStudent.html?stuNo="+objs[index].stuNo;
								});
								var td=$("<td></td>");
								td.append(bt_delete);
								td.append(bt_update);
								tr.append(td);
								$("#tbl").append(tr);
							})
						}
					});
				}else{
					$.ajax({
						type:"get",
						url:"http://localhost:8080/studentDemo/ListStudentByStrServlet",
						data:{"str":searchTxt},
						async:false,
						success:function (response) {
							objs=JSON.parse(response);
							$.each(objs,function (index) {
								var tr=$("<tr class='add'></tr>");
								if(objs[index].gender=="女"){
									tr.append("<img src='img/girl.jpeg'>");
								}else{
									tr.append("<img src='img/boy.jpg'>");
								}
								tr.append("<td>"+objs[index].stuNo+"</td>");
								tr.append("<td>"+objs[index].stuName+"</td>");
								tr.append("<td>"+objs[index].gender+"</td>");
								tr.append("<td>"+objs[index].classes+"</td>");
								tr.append("<td>"+objs[index].department+"</td>");
								tr.append("<td>"+objs[index].dormNo+"</td>");
								tr.append("<td>"+objs[index].tel+"</td>");
								var bt_delete=$("<input type='button' name='delete' value='删除'>");
								bt_delete.on("click",function () {
									$.ajax({
										type: "get",
										url: "http://localhost:8080/studentDemo/DeleteStudentByNoServlet",
										data: {"stuNo": objs[index].stuNo},
										async: false,
										success:function (response) {
											var data=JSON.parse(response);
											switch (data.result) {
												case "ok":
													alert(data.msg);
													window.location.href="listStudents.html";
													break;
												case "error":
													alert(data.msg);
													break;
												default:
													alert("出错啦!");
													break;
											}
										}
									});
								});
								var bt_update=$("<input type='button' name='update' value='修改'>");
								bt_update.on("click",function () {
									window.location.href="updateStudent.html?stuNo="+objs[index].stuNo;
								});
								var td=$("<td></td>");
								td.append(bt_delete);
								td.append(bt_update);
								tr.append(td);
								$("#tbl").append(tr);
							})
						}
					});
				}
			});
			$(function(){
				$.ajax({
					type:"get",
					url:"http://localhost:8080/studentDemo/ListStudentsServlet",
					async:false,
					success:function (response) {
						objs=JSON.parse(response);
						$.each(objs,function (index) {
							var tr=$("<tr class='add'></tr>");
							if(objs[index].gender=="女"){
								tr.append("<img src='img/girl.jpeg'>");
							}else{
								tr.append("<img src='img/boy.jpg'>");
							}
							tr.append("<td>"+objs[index].stuNo+"</td>");
							tr.append("<td>"+objs[index].stuName+"</td>");
							tr.append("<td>"+objs[index].gender+"</td>");
							tr.append("<td>"+objs[index].classes+"</td>");
							tr.append("<td>"+objs[index].department+"</td>");
							tr.append("<td>"+objs[index].dormNo+"</td>");
							tr.append("<td>"+objs[index].tel+"</td>");
							var bt_delete=$("<input type='button' name='delete' value='删除'>");
							bt_delete.on("click",function () {
								$.ajax({
									type: "get",
									url: "http://localhost:8080/studentDemo/DeleteStudentByNoServlet",
									data: {"stuNo": objs[index].stuNo},
									async: false,
									success:function (response) {
										var data=JSON.parse(response);
										switch (data.result) {
											case "ok":
												alert(data.msg);
												window.location.href="listStudents.html";
												break;
											case "error":
												alert(data.msg);
												break;
											default:
												alert("出错啦!");
												break;
										}
									}
								});
							});
							var bt_update=$("<input type='button' name='update' value='修改'>");
							bt_update.on("click",function () {
								window.location.href="updateStudent.html?stuNo="+objs[index].stuNo;
							});
							var td=$("<td></td>");
							td.append(bt_delete);
							td.append(bt_update);
							tr.append(td);
							$("#tbl").append(tr);
						})
					}
				});
			});
		</script>
	</body>
	
</html>
